$body-bg: #f1f1f1;
$body-color: #111;
$theme-colors: (
  'primary': #216dad
);
$theme-colors: (
  'accent': #669ecd
);

@import '~bootstrap/scss/bootstrap';
.panel {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100%;
  flex: 1;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0.25rem;
  .title {
    background-color: #86afd0;
    color: #ffffff;
    text-align: center;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }
  .body {
    display: flex;
  }
}

@include media-breakpoint-down(md) {
  .panel {
    .body {
      flex-direction: column;
      padding: 0px;
    }
    .title {
      font-size: 1.5rem;
    }
  }
}

@include media-breakpoint-up(md) {
  .panel {
    .body {
      flex-direction: row;
      padding: 1.5rem;
    }
  }
}
